<template>
	<view class="my-order" :data-theme="theme">
		<useNavBar :title="$t(`page.users.replyList.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar>
		<view class="list">
			<view class="item" v-for="(item, index) in replyList" :key="index">
				<view class="title acea-row row-between-wrapper">
					<navigator
						:url="`/pages/merchant/home/index?id=${item.merId}`"
						hover-class="none"
					>
						<view class="acea-row row-middle">
							<text class="iconfont icon-shangjiadingdan mr10"></text>
							<text class="mr10">{{ item.merName }}</text>
							<text class="iconfont icon-gengduo"></text>
						</view>
					</navigator>
				</view>
				<view
					@click="goProDetails(item.productId)"
					class="item-info acea-row row-between row-top"
				>
					<view class="pictrue">
						<image :src="item.image"></image>
					</view>
					<view class="text acea-row row-between">
						<view class="name line2">{{ item.productName }}</view>
						<view class="money">
							<view
								><statistic :value="item.price" :currency="item.currency"
							/></view>
							<view>x{{ item.payNum }}</view>
						</view>
						<!-- <view class="sku">{{$t(`page.users.goodsCommentList.attribute`)}}: {{ item.sku?item.sku:'无' }}</view> -->
					</view>
				</view>
				<view class="bottom acea-row row-right row-middle">
					<view class="bnt bg_color" @click="evaluateTap(item)">{{
						$t(`page.users.orderList.evaluation`)
					}}</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper">
				<text
					class="loading iconfont icon-jiazai"
					:hidden="loading == false"
				></text
				>{{ replyList.length > 0 ? loadTitle : "" }}
			</view>
			<view class="noCommodity" v-if="replyList.length == 0 && !loading">
				<view class="pictrue">
					<image src="@/static/images/noEvaluate.png"></image>
				</view>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
import statistic from "@/components/statistic";
import { orderReplyList } from "@/api/order.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
export default {
	components: { statistic },
	data() {
		return {
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: this.$t(`page.goodsList.more`), //提示语
			replyList: [], //订单数组
			page: 1,
			limit: 20,
			isShow: false,
			theme: "theme3",
			rightDrawer: false,
		};
	},
	computed: mapState(useAppStore, ["isLogin"]),

	onShow() {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.replyList.navTitle`),
		});
		let that = this;
		if (this.isLogin) {
			this.loadend = false;
			this.page = 1;
			this.$set(this, "replyList", []);
			this.getReplyList();
		} else {
			toLogin();
		}
	},
	methods: {
		returns() {
			uni.navigateBack();
		},
		evaluateTap(item) {
			uni.navigateTo({
				url:
					"/pages/users/goods_comment_con/index?orderNo=" +
					item.merOrderNo +
					"&id=" +
					item.id,
			});
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		/**
		 * 去商品详情
		 */
		goProDetails: function (id) {
			uni.navigateTo({
				url: `/pages/goods_details/index?id=${id}`,
			});
		},
		/**
		 * 获取订单列表
		 */
		getReplyList: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = this.$t(`page.goodsList.more`);
			orderReplyList({
				page: that.page,
				limit: that.limit,
			})
				.then((res) => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.replyList = that.$util.SplitArray(list, that.replyList);
					that.$set(that, "replyList", that.replyList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},
	},
	onReachBottom: function () {
		this.getReplyList();
	},
};
</script>

<style lang="scss" scoped>
.sku {
	font-size: 24rpx;
	color: #999999;
	margin: 10rpx 0;
}
.icon-shangjiadingdan {
	font-size: 28rpx;
}
.icon-gengduo {
	font-size: 10rpx;
}
.my-order .header {
	height: 250rpx;
	padding: 0 30rpx;
}
.my-order .header .picTxt {
	height: 190rpx;
}

.my-order .header .picTxt .text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 26rpx;
}

.my-order .header .picTxt .text .name {
	font-size: 34rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
	width: 122rpx;
	height: 109rpx;
}

.my-order .header .picTxt .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .nav {
	background-color: #fff;
	border-top: 1px solid #f5f5f5;
	// margin: -60rpx 0 0;
}

.my-order .nav .item {
	text-align: center;
	font-size: 26rpx;
	color: #282828;
	padding: 26rpx 30rpx;
	display: inline-block;
	background-color: #fff;
}

.my-order .nav .item.on {
	/* #ifdef H5 || MP */
	font-weight: bold;
	/* #endif */
	/* #ifdef APP-PLUS */
	color: #000;
	/* #endif */
	position: relative;
}
.my-order .nav .item.on ::after {
	content: "";
	width: 78rpx;
	height: 4rpx;
	@include main_bg_color(theme);
	position: absolute;
	bottom: 2rpx;
	left: 30rpx;
}
.my-order .nav .item .num {
	margin-top: 18rpx;
}

.my-order .list {
	width: 690rpx;
	margin: 14rpx auto 0 auto;
}

.my-order .list .item {
	background-color: #fff;
	border-radius: 14rpx;
	margin-bottom: 14rpx;
}

.my-order .list .item .title {
	height: 84rpx;
	padding: 0 24rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;
	color: #282828;
}

.my-order .list .item .title .sign {
	font-size: 24rpx;
	padding: 0 13rpx;
	height: 36rpx;
	margin-right: 15rpx;
	border-radius: 18rpx;
	border: $coupons-border3;
	color: $main-color-theme3;
}

.my-order .list .item .item-info {
	padding: 0 24rpx;
	margin-top: 22rpx;
}

.my-order .list .item .item-info .pictrue {
	width: 120rpx;
	height: 120rpx;
}

.my-order .list .item .item-info .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.my-order .list .item .item-info .text {
	width: 500rpx;
	font-size: 28rpx;
	color: #999;
}

.my-order .list .item .item-info .text .name {
	width: 350rpx;
	color: #282828;
}

.my-order .list .item .item-info .text .money {
	text-align: right;
}
.font_color {
	@include main_color(theme);
}
.my-order .list .item .totalPrice {
	font-size: 26rpx;
	color: #282828;
	text-align: right;
	margin: 27rpx 0 0 30rpx;
	padding: 0 30rpx 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.my-order .list .item .totalPrice .money {
	font-size: 28rpx;
	font-weight: bold;
	@include price_color(theme);
}

.my-order .list .item .bottom {
	height: 107rpx;
	padding: 0 30rpx;
}

.my-order .list .item .bottom .bnt {
	// width: 176rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 50rpx;
	font-size: 27rpx;
	padding: 0 30rpx;
	border: $coupons-border3;
	color: $main-color-theme3;
}

.my-order .list .item .bottom .bnt.cancelBnt {
	border: 1rpx solid #ddd;
	color: #aaa;
}

.my-order .list .item .bottom .bnt ~ .bnt {
	margin-left: 17rpx;
}

.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
}

.noCart .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}
::v-deep .tui-red {
	@include main_bg_color(theme);
}
::v-deep .tui-red-outline {
	@include main_color(theme);
	@include coupons_border_color(theme);
}

</style>
